import 'package:environmental_les_app/common/style/colours.dart';
import 'package:environmental_les_app/page/main/widgets/surrounding_units_item.dart';
import 'package:flutter_clx_base/flutter_clx_base.dart';

import 'index.dart';

class LocationSelectionPage extends GetView<LocationSelectionController> {
  const LocationSelectionPage({super.key});

  // 主视图
  Widget _buildView() {
    return SafeArea(
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 顶部空间, 与背景图片叠加
            const MyPageAppBar(
              title: "点位选择",
              backgroundColor: Colors.transparent,
            ),

            // 搜索区
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Row(
                children: [
                  InkWell(
                    onTap: () {},
                    child: const Row(
                      children: [
                        Text('周边',
                            style: TextStyle(
                                color: Colours.textC4C,
                                fontSize: 15,
                                fontWeight: FontWeight.bold)),
                        SizedBox(width: 6),
                        Text('2KM',
                            style: TextStyle(
                                color: Colours.appMain,
                                fontWeight: FontWeight.bold)),
                        Icon(Icons.keyboard_arrow_down, color: Colours.textC4C),
                      ],
                    ),
                  ),
                  const SizedBox(width: 12),
                  Expanded(
                    child: Container(
                      height: 40,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(6),
                      ),
                      padding: const EdgeInsets.symmetric(horizontal: 12),
                      child: const Row(
                        children: [
                          Icon(Icons.search, color: Colours.text969),
                          SizedBox(width: 8),
                          Expanded(
                              child: Text('在淮格尔旗中搜索',
                                  style: TextStyle(color: Colours.textC9CDD4))),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),

            const SizedBox(height: 12),

            // 列表
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                children: controller.dataList.map((data) {
                  return SurroundingUnitsItem(data: data);
                }).toList(),
              ),
            ),

            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LocationSelectionController>(
      init: LocationSelectionController(),
      id: "location_selection",
      builder: (_) {
        return Scaffold(
          body: Stack(
            children: [
              Container(
                height: 200,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(ImageUtils.getImgPath('bg_title_top')),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              _buildView(),
            ],
          ),
        );
      },
    );
  }
}
